<template>
  <div>
    <div>
      <el-cascader v-if="show" v-model="val" :style="styles" class="area" clearable :props="props" :placeholder="placeholder" @change="change" />
    </div>
  </div>
</template>
<script>
import { getChildren } from '@/api/address'
export default {
  props: {
    // eslint-disable-next-line vue/require-default-prop
    value: {
      type: [Array, Number], // 对象或数组默认值必须从一个工厂函数获取
      default() {
        return [null, null, null]
      }
    },
    styles: {
      default: '',
      type: String
    },
    show: {
      default: false,
      type: Boolean
    },
    placeholder: {
      default: '请选择',
      type: String
    }
  },
  data() {
    return {
      val: [], // v-model 的绑定
      // 返回地理位置
      props: {
        lazy: true,
        lazyLoad(node, resolve) {
          let li = []
          if (node.level > 0) {
            getChildren(node.value).then(data => {
              const re = data.data
              li = re.map((e) => {
                return {
                  value: e.id,
                  label: e.name,
                  leaf: node.level === 2
                }
              })
              resolve(li)
            })
          } else {
            getChildren(0).then(data => {
              const re = data.data
              li = re.map((e) => {
                return {
                  value: e.id,
                  label: e.name,
                  leaf: node.level === 2
                }
              })
              resolve(li)
            })
          }
        }
      }
    }
  },
  watch: {
    value: {
      handler(newVal, oldVal) {
        this.val = newVal
        console.log(`new: ${newVal}, old: ${oldVal}`)
      },
      deep: true
    }
  },
  mounted() {
    console.log(this.value)
  },
  methods: {
    // 修改事件
    change(e) {
      this.$emit('input', e)
    }
  }
}
</script>
